<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
      <el-button type="primary" @click="dialogFormVisible2 = true">添加</el-button>
 <el-table
    :data="tableData"
    style="width: 40%; margin:50px auto">
    
     <el-table-column
      type="index"
      width="50">
    </el-table-column>
   
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>



  <el-dialog title="编辑" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="名称:" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="住址:" :label-width="formLabelWidth">
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">编 辑</el-button>
  </div>
</el-dialog>


<el-dialog title="添加" :visible.sync="dialogFormVisible2">
  <el-form :model="form2">
    <el-form-item label="名称:" :label-width="formLabelWidth">
      <el-input v-model="form2.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="住址:" :label-width="formLabelWidth">
      <el-input v-model="form2.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="add()">添 加</el-button>
  </div>
</el-dialog>
   
  </div>
</template>




<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  // components: {
  //   HelloWorld
  // }
   data() {
      return {
        tableData: [{

          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {

          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {

          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {

          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        dialogFormVisible:false,
        dialogFormVisible2:false,
        form: {
          name: '',
          address:""
        },
        form2: {
          name: '',
          address:""
        },
        formLabelWidth:"60px"
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
        this.form = row
        // 打开弹窗
        this.dialogFormVisible=true
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.tableData.splice(index,1)
      },

// 添加按钮
add(){
  console.log(this.form2)
  this.tableData.unshift({name:this.form2.name,address:this.form2.address})
  this.form2={}
 this.dialogFormVisible2 = false
}
    }
}
</script>
